<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>增加用户</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
    <!-- validation -->
    <script type="text/javascript" th:src="@{/js/jquery/jquery.validate.js}"></script>
    <!-- layer -->
    <link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/plug/layui/layui.js}" charset="utf-8"></script>

    <link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
    <script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>

    <style type="text/css">

        .need_span {
            color: red;
            display: none;
        }

        .need_0, .validation_span {
            color: red;
        }

        .need_1 {
            color: #666666;
        }

        .input_0 {
            width: 200px;
        }

        .form_table td {
            padding: 5px;
        }

        .text_ad_0 {
            font-weight: bold;
            color: #444444;
            white-space: nowrap;
        }
    </style>

    <script type="text/javascript" th:inline="javascript">

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#userBirthday' //指定元素
            });
        });

        function getTime(val) {
            if (val) {
                val = val.split("T");
                return val[0];
            }
            return "";
        }

        $(function () {
            $(".re_password").hide();

            //验证数字长度
            $.validator.addMethod(
                "mobilephone",
                function (value, element, param) {
                    var length = value.length;
                    var mobile = /^[0-9]{11}$/;
                    return this.optional(element) || (length == param && mobile.test(value));
                },
                "请输入正确的11位手机号码"
            );

            //验证工作号码
            $.validator.addMethod(
                "workNumber",
                function (value, element, param) {
                    //var length = value.length;
                    var mobile = /^((\d{3,5})-)(\d{6,10})(-(\d{1,5}))?$/;
                    return this.optional(element) || mobile.test(value);
                },
                "请输入正确的工作号码"
            );

            //验证id只包含数字字母
            $.validator.addMethod(
                "withOutChinese",
                function (value, element, param) {
                    var withOutChinese = /^[\w@.-]+$/;
                    return this.optional(element) || withOutChinese.test(value);
                },
                "请输入字母和数字的组合(可以有@_.-)"
            );

            //验证姓名(中文，数字，字母)
            $.validator.addMethod(
                "onlyName",
                function (value, element, param) {
                    var withOutChinese = /^([\u4E00-\u9FA5]|\w)*[^_]$/;
                    return this.optional(element) || withOutChinese.test(value);
                },
                "请输入正确的姓名"
            );

            //开始验证 --校验userID合法性
            $('form').validate({
                debug: true,
                /**//* 设置验证规则 */
                rules: {
                    userId: {
                        required: true,
                        rangelength: [2, 20],
                        withOutChinese: true,
                        remote: {
                            url: "/user-api/checkUserId",
                            type: "post",
                            dataType: "json",
                            async: false,  //默认true,异步
                            data: {
                                userId: function () {
                                    return $.trim($("#userId").val());
                                }
                            },
                            dataFilter: function (result, type) {
                                result = JSON.parse(result);//把字符串转JSON
                                //alert(JSON.stringify(result));
                                if (result.code == 9006) {
                                    //用户名不可用
                                    return false;
                                } else {
                                    //用户名可用
                                    return true;
                                }
                            }
                        }
                    },
                    userName: {
                        required: true,
                        rangelength: [2, 20],
                        onlyName: true
                    },
                    userIdcard: {
                        required: true,
                        rangelength: [18, 18],
                    },
                    userTel: {
                        required: true,
                        mobilephone: 11
                    },
                    userMail: {
                        //required:true,
                        email: true,
                        maxlength: 100
                    },
                    userAddress: {
                        //required:true,
                        maxlength: 100
                    },
                    userPassword: {
                        required: true,
                        rangelength: [6, 20]
                    }
                },
                /**//* 设置错误信息 */
                messages: {
                    userId: {
                        required: "账号不可为空",
                        rangelength: "账号必须在2-20个字符之间",
                        remote: "账号已经存在!"
                    },
                    userIdcard: {
                        required: "身份证号不可为空",
                        rangelength: "输入的身份证错误",
                    },
                    userName: {
                        required: "姓名不可为空",
                        rangelength: "姓名必须在2-20个字符之间",
                        onlyName: "请输入正确的姓名(中文,数字,字母)"
                    },
                    userTel: {
                        required: "移动电话号码不可为空",
                        mobilephone: "请输入正确的手机号码"
                    },
                    userMail: {
                        email: "请输入正确的邮箱",
                        maxlength: "最多100个字符"
                    },
                    userAddress: {
                        maxlength: "最多100个字符"
                    },
                    userPassword: {
                        required: "密码不可为空",
                        rangelength: "密码必须在6-20个字符之间"
                    }
                },
                /**//* 设置验证触发事件 */
                onsubmit: true,
                /**//* 设置错误信息提示DOM */
                errorPlacement: function (error, element) {
                    $(element[0]).parent().find(".validation_span").text(error.html()).show();
                },
                success: function (error, element) {
                    $(element[0]).parent().find(".validation_span").text("");
                },
                submitHandler: function () {
                    save();
                }
            });

            //返回按钮
            $("#backBtu").click(function () {
                layer.confirm('确认返回吗？', {icon: 3, title: '提示'}, function (index) {
                    parent.layer.closeAll();
                });
            });
        });

        function closeSelf() {
            var i = layer.getFrameIndex();
            layer.close(i);
        }

        //保存
        function save() {
            var param = new Object();
            param.userId = $.trim($("#userId").val());
            param.userPassword = $.trim($("#userPassword").val());
            param.userName = $.trim($("#userName").val());
            param.userTel = $.trim($("#userTel").val());
            var time = $("#userBirthday").val();
            if (time != null && time != '') {
                time = time.split('-');
                var myTime = new Date(time[0], (time[1] - 1), time[2]);
                param.userBirthday = myTime;
            }
            param.userMail = $.trim($("#userMail").val());
            param.userAddress = $.trim($("#userAddress").val());
            param.userSex = $(":radio[name='userSex']:checked").val();
            param.position = $.trim($("#position").val());
            param.dept = $.trim($("#dept").val());
            param.userState = $("#userState").val();
            param.userIdcard = $("#userIdcard").val();

            var urlStr = "/user-api/add";

            layer.confirm('确认新增吗？', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    async: true,  //默认true,异步
                    data: param,
                    url: urlStr,
                    success: function (result) {
                        console.log(result);
                        if (result.code == 200) {
                            layer.alert('保存成功！', {icon: 1}, function (indexOk) {
                                parent.search();
                                parent.$("#add_iframe iframe").attr("src", "");
                                parent.$("div").first().show();
                                parent.$("#add_iframe").hide();
                                parent.layer.closeAll();
                            });
                        } else {
                            layer.alert('保存失败！', {icon: 2}, function (indexNo) {
                                parent.layer.closeAll();
                            });
                        }
                    }
                });
            });
        }

    </script>
</head>
<body>
<div style="margin-left:15px; height: 400px;">
    <div class="first_div" style="border:none;">
        <div id="adListDiv" align="left">
            <form>
                <table class="form_table" style="border-collapse: collapse;margin-left:20px;margin-top:10px;">
                    <tr>
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">账号：</span>
                        </td>
                        <td>
                            <input id="userId" type="text" name="userId" class="input_0"/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">初始密码：</span>
                        </td>
                        <td>
                            <input id="userPassword" type="text" name="userPassword" class="input_0" value="123456"
                                   readonly/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">姓名：</span>
                        </td>
                        <td>
                            <input id="userName" type="text" name="userName" class="input_0"/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">性别：</span>
                        </td>
                        <td>
                            <input type="radio" id="userSex1" name="userSex" value="1" checked="checked"
                                   style="vertical-align:middle;"/>
                            <span style="vertical-align:middle;">男</span>
                            <input type="radio" id="userSex2" name="userSex" value="0"
                                   style="margin-left:10px;vertical-align:middle;"/>
                            <span style="vertical-align:middle;">女</span>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr style="">
                        <td align="right">
                            <span class="need_0"></span>
                            <span class="text_ad_0">出生日期：</span>
                        </td>
                        <td>
                            <input id="userBirthday" type="text" name="userBirthday" class="input_0" value=""/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="text_ad_0">所属部门：</span>
                        </td>
                        <td>
                            <input id="dept" type="text" name="dept" class="input_0" value=""/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="text_ad_0">职位：</span>
                        </td>
                        <td>
                            <input id="position" type="text" name="position" class="input_0" value=""/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">移动电话：</span>
                        </td>
                        <td>
                            <input id="userTel" type="text" name="userTel" class="input_0"/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            <span class="text_ad_0">邮箱：</span>
                        </td>
                        <td>
                            <input id="userMail" type="text" name="userMail" class="input_0"/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr style="">
                        <td align="right">
                            <span class="text_ad_0">地址：</span>
                        </td>
                        <td>
                            <input id="userAddress" type="text" name="userAddress" class="input_0" value=""/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr style="">
                        <td align="right">
                            <span class="need_0">*</span>
                            <span class="text_ad_0">身份证号：</span>
                        </td>
                        <td>
                            <input id="userIdcard" type="text" name="userIdcard" class="input_0" value=""/>
                            <span class="validation_span"></span>
                        </td>
                    </tr>
                    <tr>
                        <td style="" align="right">
                            <span class="text_ad_0">用户类型：</span>
                        </td>
                        <td>
                            <select id="userState" name="userState" class="input_0">
                                <option value="1">超级管理员</option>
                                <option value="2">老师</option>
                                <option value="3">家长</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="left">
                            <div style="margin-top:10px;margin-bottom:20px;margin-left:120px;">
                                <input type="submit" class="layui-btn" lay-submit="" lay-filter="add" id="saveBtu"
                                       name="saveBtu" value="新增" style=""/>
                                <input type="button" class="layui-btn" lay-submit="" lay-filter="add" id="backBtu"
                                       name="backBtu" value="返回" style="margin-left:20px;"/>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>